<?php
//不定期更新详情关注:https://gitee.com/weivote/phpbigfileUpload
 include "./conn.php";
?><!DOCTYPE html>
<html>
<head>
 <title><?php echo "$biaoti"; ?></title>
 <style type="text/css">
  body {font-family: Arial, sans-serif;font-size: 14px;background-color: #f2f2f2;}
  h3{margin: 0;font-size: 18px;line-height: 1.8;color: blue;}
  p {margin: 0; font-size: 14px; line-height: 1.5;}
  #urls {color: blue;}
 .container {
   margin: 50px auto;
   padding: 20px 20px 50px 20px;
   background-color: #fff;
   border-radius: 5px;
   box-shadow: 0 0 10px rgba(0,0,0,0.3);
   max-width: 678px;
  }
  #mask{
   position: fixed;   top: 0;   left: 0;   width: 100%;   height: 100%;
   background-color: rgba(0,0,0,0.5);   display: none;
  }
  #dialog{
   position: fixed;   top: 50%;   left: 50%;
   min-width: 300px;   transform: translate(-50%,-50%);
   background-color: #fff;   padding: 20px;   border-radius: 5px;
   box-shadow: 0 0 10px rgba(0,0,0,0.5);   display: none;
  }
  #dialog .btn, .bts{
   display: flex;   float: left;   padding: 5px 8px;
   background-color: #007bff;   color: #fff;   border-radius: 3px;
   cursor: pointer;   margin: 10px 10px 10px 0;
  }
  #dialog .btn:hover, .bts:hover{
   background-color: #0069d9;
  }
  #progress{
  width: 100%; min-width: 300px;  height: 20px;
  background-color: #f7f7f7;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
  }
  .finish {
  background-color: #149bdf;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 20px 20px;
  height: 100%;
  }
 </style>
</head>
<body>
<div class="container">
 <h3><?php echo "$biaoti"; ?></h3>
 <p>说明：限制大小<?php echo $zlimi;?>Mb；支持<?php echo $upexe?>格式上传!</p>
 <div style="margin-bottom:20px;display:block;">
 <button onclick="up('file')" class="bts">上传</button>
 </div>
 <input type="file" id="file" accept="<?php echo $upexe?>" style="display:none;">
</div>
 <div id="mask"></div>
 <div id="dialog">
 <div id="progress">
  <div id="uend" class="finish" style="width: 0%;" progress="0"></div>
 </div>
  <div id="back"></div>
  <div id="buts"><button class="btn" id="ok" onclick="hideDialog()">确定</button></div>
 </div>
 <script type="text/javascript">
//不定期更新详情关注:https://gitee.com/weivote/phpbigfileUpload
function $(Obj){return document.getElementById(Obj);}
function up(Obj){ $(Obj).value=""; $(Obj).click();}
  var mask = $('mask');
  function showDialog(){
   mask.style.display = 'block';
   dialog.style.display = 'block';
  }
  function hideDialog(){
   mask.style.display = 'none';
   dialog.style.display = 'none';
  }
//JS部分 基于https://gitee.com/suzhifa/bigFilesUploadDemo/二开
//精简：本页作了去jq改为原生JS调用网页元素和设定网页ID内容值
//界面做了美化；后端个人重写
//界面稍作优化：比如改进反馈信息显示 制定格式文件选择 按钮美化等
//某代码后移解决二次选择文件上传失败;百分比小数位数优化
//初始化INPUT值解决同文件选择无反应(onchange无效)
  var tici = Date.parse(new Date())/1000;
  var ufile = $("file");
  var jdt_s = $('uend');
  var ipt_s = $('back');
  ufile.onchange = function () {
  tici = tici + 1; $("back").innerHTML="";
  jdt_s.style.width = "1%";  jdt_s.innerHTML = "";
  showDialog();
  var vupload = new Upload(jdt_s, ipt_s);//后移解决二次选择文件上传失败
  vupload.addFileAndSend(this);
  };
  function Upload(jdt, ipt) {
  const LENGTH = 1024 * 1024 * <?php echo $dlimi;?>;//分片上传每片数量MB
  var start = 0; var end = start + LENGTH;
  var blob; var blob_num = 1;
  this.addFileAndSend = function (that) {
 var file = that.files[0];
//以下增加文件格式和大小判断,减少流量带宽资源浪费
if(!file){ ipt_s.innerHTML = "<b>未上传:</b>未选择文件!"; return false;}
if (!/(<?php echo $upext;?>)$/.test(file.name)){
 ipt_s.innerHTML = '<b>未上传:</b>仅支持后缀格式（<?php echo $upexe;?>）!'; return false;
}
if (file.size > <?php echo $zlimi;?> * 1024 * 1024){
 ipt_s.innerHTML = '<b>未上传:</b>文件大小超<?php echo $zlimi;?>MB限制!'; return false;
}
  blob = cutFile(file);
  sendFile(blob, file);
  blob_num += 1;
  };
  function cutFile(file) {
  var file_blob = file.slice(start, end);
  start = end;  end = start + LENGTH;
  return file_blob;
  }
  function sendFile(blob, file) {
  var xhr = new XMLHttpRequest();
  var fdata = new FormData();
  var total_blob_num = Math.ceil(file.size / LENGTH);
  fdata.append('file', blob);
  fdata.append('blob_num', blob_num);
  fdata.append('filesize', file.size);
  fdata.append('nowYmd', tici);
  fdata.append('total_blob_num', total_blob_num);
  fdata.append('file_name', file.name);
  xhr.open('POST', 'upload.php?act=up&t='+Math.random(), false);
  xhr.onreadystatechange = function () {
  var progress;  var progressObj = jdt;
  if (total_blob_num === 1) {
  progress = '100%';
  } else {
  //百分比显示优化(小数点)
  progress = Math.ceil((blob_num / total_blob_num) * 10000) / 100 + '%';
  }
  progressObj.style.width = progress;
  progressObj.innerHTML = progress;
  var tt = setTimeout(function () {
  var jj = JSON.parse(xhr.response);
  console.log(jj);
  if (jj.code == 2 || jj.code == 1) {
  if (start < file.size) {
  blob = cutFile(file);
  sendFile(blob, file);
  blob_num += 1;
  }
if (jj.code == 2){ $("back").innerHTML='<h3>上传成功:</h3>网址:<span id="urls">'+jj.url+'</span>';}
  }
if (jj.code == 0){ $("back").innerHTML='<h3>上传失败:</h3><b>'+jj.msg+'</b>';}
  xhr = undefined;
  fdata = undefined;
  }, 500);
  };
  xhr.send(fdata);
  }
  }
</script>
 </body>
</html>